<script setup>
	import { ref, getCurrentInstance, reactive, computed } from 'vue'
	import FeedList from './components/feed-list.vue'
	import DoctorList from './components/doctor-list.vue'
	import { feedListApi, doctorListApi } from '@/services/doctor.js'
	import { onLoad } from '@dcloudio/uni-app'
	import { debounce2 } from '@/utils/utils.js'
	// 获取安全区域尺寸
	const { safeAreaInsets } = uni.getSystemInfoSync()
	const list = ref([
		{
			label: '推荐',
			type: 'recommend',
			current: 1,
			hasMore: true,
			list: [],
			rendered: true,
		},
		{
			label: '关注',
			type: 'like',
			current: 1,
			hasMore: true,
			list: [],
			rendered: false,
		},

		{
			label: '减脂',
			type: 'fatReduction',
			current: 1,
			hasMore: true,
			list: [],
			rendered: false,
		},
		{
			label: '饮食',
			type: 'food',
			current: 1,
			hasMore: true,
			list: [],
			rendered: false,
		},
	])
	const tabIndex = ref(0)
	const feedType = computed(() => list.value[tabIndex.value].type)
	const feedCurrent = computed(() => list.value[tabIndex.value].current)
	// 每次请求的数据
	const feedPageSize = ref(5)
	const doctorItems = ref([])
	const getFeedList = debounce2(async ()=>{
		const { code, data, message } = await feedListApi({
			type: feedType.value,
			current: feedCurrent.value,
			pageSize: feedPageSize.value,
		})
		if (code !== 10000) return uni.utils.toast(message)

		data.rows.forEach((row) => {
			row.content = row.content.replace(/<[^>]*>/g, '')
		})

		const pre = list.value[tabIndex.value]
		list.value[tabIndex.value].list.push(...data.rows)
		// 更新标签页码
		if (pre.hasMore) pre.current++
		// 判断是否有更多数据
		pre.hasMore = pre.current <= data.pageTotal
	},500)

	const handleTab = ({ index }) => {
		tabIndex.value = index
		if (!list.value[index].rendered) getFeedList()
		list.value[index].rendered = true
	}

	onLoad(() => {
		getFeedList()
		getDoctorList()
	})
	function scrolltolower() {
		scrolltogetFeedList()
	}
	function scrolltogetFeedList(){
		if (list.value[tabIndex.value].hasMore) getFeedList()
	}
	async function getDoctorList() {
		const { code, data, message } = await doctorListApi()
		if (code !== 10000) return uni.utils.toast(message)
		// 渲染数据
		doctorItems.value = data.rows
	}
</script>
<script>
	export default {
		options: {
			styleIsolation: 'shared',
		},
	}
</script>
<template>
	<scroll-page @scrolltolower="scrolltolower" class="scroll-page">
		<view
			class="index-page"
			:style="{ backgroundPositionY: -48 + safeAreaInsets.top + 'px' }"
		>
			<view class="page-navBar"> 优医 </view>
			<view class="search-bar">
				<input
					type="text"
					class="input"
					placeholder-class="input-placeholder"
					placeholder="搜一搜: 疾病/症状/医生/健康知识"
				/>
				<view class="icon-search">
					<uni-icons type="search" color="#C3C3C5" size="22"></uni-icons>
				</view>
			</view>
		</view>
		<view class="quick-entry">
			<navigator
				url="/subpkg_consult/quickly/index?type=1"
				hover-class="none"
				class=""
			>
				<view class="quick-entry-item">
					<image
						src="/static/images/quick-entry-1.png"
						class="quick-entry-icon"
					/>
					<text class="label">问医生</text>
					<text class="small">按科室查问医生</text>
				</view>
			</navigator>
			<navigator url="/subpkg_consult/quickly/index?type=2" hover-class="none">
				<view class="quick-entry-item">
					<image
						src="/static/images/quick-entry-2.png"
						class="quick-entry-icon"
					/>
					<text class="label">极速问诊</text>
					<text class="small">20s医生极速回复</text></view
				>
			</navigator>
			<navigator url="/subpkg_consult/quickly/index?type=3" hover-class="none">
				<view class="quick-entry-item">
					<image
						src="/static/images/quick-entry-3.png"
						class="quick-entry-icon"
					/>
					<text class="label">开药门诊</text>
					<text class="small">线上买药更方便</text>
				</view>
			</navigator>
		</view>
		<view class="quick-view">
			<navigator url="/subpkg_medicine/order_list/index" hover-class="none">
				<view class="quick-entry-item">
					<image
						src="/static/images/quick-entry-1.png"
						class="quick-entry-icon"
					/>
					<text class="label">药品订单</text>
				</view>
			</navigator>
			<navigator url="" hover-class="none">
				<view class="quick-entry-item">
					<image
						src="/static/images/quick-entry-2.png"
						class="quick-entry-icon"
					/>
					<text class="label">健康档案</text>
				</view>
			</navigator>
			<navigator url="" hover-class="none">
				<view class="quick-entry-item">
					<image
						src="/static/images/quick-entry-3.png"
						class="quick-entry-icon"
					/>
					<text class="label">我的处方</text>
				</view>
			</navigator>
			<navigator url="" hover-class="none" class="quick-view-item"
				><view class="quick-entry-item">
					<image
						src="/static/images/quick-entry-4.png"
						class="quick-entry-icon"
					/>
					<text class="label">疾病查询</text>
				</view>
			</navigator>
		</view>
		<view class="banner-placeholder">
			<swiper
				class="uni-swiper"
				circular
				indicator-dots
				indicator-color="#ffffff99"
				indicator-active-color="#fff"
			>
				<swiper-item>
					<navigator url="" hover-class="none" class="navigator">
						<image
							src="/static/images/banner-1.png"
							alt=""
							class="banner-image"
						/>
					</navigator>
				</swiper-item>
				<swiper-item>
					<navigator url="" hover-class="none" class="navigator">
						<image
							src="/static/images/banner-1.png"
							alt=""
							class="banner-image"
						/>
					</navigator>
				</swiper-item>
			</swiper>
		</view>

		<!-- 粘性盒子if 和父盒子一样高，则粘性定位失效 -->
		<view
			class="doctor-feeds"
			:style="{ marginTop: -safeAreaInsets.top + 'px' }"
		>
			<custom-sticky :offsetTop="safeAreaInsets.top + 'px'">
				<custom-tabs :list="list" @changeTab="handleTab"></custom-tabs>
			</custom-sticky>

			<view
				v-for="(feed, index) in list"
				:key="feed.type"
				v-show="tabIndex === index"
			>
				<DoctorList
					:list="doctorItems"
					v-if="feed.type == 'recommend' && doctorItems.length > 0"
					class="doctor-list"
				></DoctorList>
				<FeedList :list="feed.list" v-if="feed.rendered"></FeedList>
			</view>
		</view>
	</scroll-page>
</template>

<style lang="scss" scoped>
	.index-page {
		min-height: 260rpx;
		background-size: contain;
		background: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/index-page-header-bg.png)
			no-repeat;
		padding-top: 10rpx;
		overflow: hidden;

		.page-navBar {
			height: 88rpx;
			line-height: 88rpx;
			padding: 0 30rpx;
			font-size: 34rpx;
			color: #fff;
		}
		.search-bar {
			position: relative;
			height: 80rpx;
			padding: 0 30rpx;
			margin-top: 10rpx;
			.input {
				margin-top: 30rpx;
				height: 100%;
				padding-left: 80rpx;
				padding-right: 40rpx;
				font-size: 26rpx;
				color: #3c3e42;
				background-color: #fff;
				border-radius: 80rpx;
				box-shadow: 0px 10rpx 22rpx rgba(0, 0, 0, 0.1);
			}
			.icon-search {
				position: absolute;
				top: 50%;
				transform: translate(24rpx, -50%);
				margin-top: 2rpx;
			}
			.input-placeholder {
				color: #979797;
			}
		}
	}
	.quick-entry {
		display: flex;
		justify-content: space-around;
		line-height: 1;
		padding: 50rpx 30rpx 40rpx;
		&-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			.label {
				margin: 20rpx 0 10rpx;
				font-size: 28rpx;
				color: #121826;
			}
			.small {
				font-size: 22rpx;
				color: #848484;
			}
		}
		&-icon {
			width: 92rpx;
			height: 92rpx;
		}
	}
	.quick-view {
		display: flex;
		justify-content: space-around;
		line-height: 1;
		padding: 10rpx 30rpx;
		&-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			.label {
				margin: 20rpx 0 10rpx;
				font-size: 28rpx;
				color: #121826;
			}
		}
		&-icon {
			width: 62rpx;
			height: 62rpx;
		}
	}
	.banner-placeholder {
		height: 200rpx;
		padding: 0 30rpx;
		margin: 20rpx 0;
		position: relative;
		z-index: 101;
		.uni-swiper {
			height: 200rpx;
		}
		.banner-image {
			width: 100%;
			height: 200rpx;
		}
	}
</style>
